<script setup lang='ts'>
import lottie from "lottie-web";
import { nextTick, onMounted } from "vue";
import { useRoute } from "vue-router";
import { $t } from "@/plugins/i18n";
import Motion from "@/views/login/utils/motion";
import animationData from "./lottie/error.json";

defineOptions({
    name: "ErrorPage",
});

const route = useRoute();
const status = route.path.split("/")[2];
const statusDesc: Record<string, string> = {
    403: "FORBIDDEN",
    404: "NOT FOUND",
    500: "SERVER ERROR",
};

onMounted(() => {
    nextTick(() => {
        lottie.loadAnimation({
            animationData,
            loop: true,
            autoplay: true,
            renderer: "svg",
            container: document.getElementById("error-container")!,
        });
    });
});
</script>

<template>
    <div class="error-wrapper flex-center flex-col">
        <Motion :delay="100">
            <div class="flex-center mt-[-150px]">
                <div id="error-container" class="w-full md:w-[60vw] xl:w-[40vw]" />
            </div>
        </Motion>
        <Motion :delay="200">
            <div class="flex-center">
                <div class="text-6xl md:text-7xl mr-[2vw]">
                    {{ status }}
                </div>
                <div>
                    <div class="text-xl md:text-3xl text-[#ccc] ">
                        {{ statusDesc[status] }}
                    </div>
                    <el-button type="primary" class="mt-1" @click="$router.push('/')">
                        {{ $t("button.backHome") }}
                    </el-button>
                </div>
            </div>
        </Motion>
    </div>
</template>

<style lang="scss" scoped>
.error-wrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
</style>
